<template>
  <div class="app-container">

    <Tabs :active-value="queryParams.tabType" :tabs="tabs" @change="changeTab"></Tabs>

    <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery" :key="queryParams.tabType">

      <el-col :span="6">
        <el-form-item label="订单号:" prop="orderNo">
          <el-input v-model="queryParams.orderNo" clearable placeholder="请输入子订单号"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="车牌号:" prop="carNo">
          <el-input v-model="queryParams.carNo" clearable placeholder="请输入车牌号"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="所属公司:" prop="companyId">
          <el-select v-model="queryParams.companyId" clearable>
            <el-option v-for="deptItem in deptList" :key="deptItem.deptId" :label="deptItem.deptName" :value="deptItem.deptId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="客户名称:" prop="customerName">
          <el-input v-model="queryParams.customerName" clearable placeholder="请输入客户名称"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="6" v-if="queryParams.tabType==1||queryParams.tabType>4">
        <el-form-item label="申请人:" prop="createBy">
          <el-input v-model="queryParams.createBy" clearable placeholder="请输入申请人"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="6" v-if="queryParams.tabType==1">
        <el-form-item label="还车状态:" prop="returnStatus">
          <el-select v-model="queryParams.returnStatus" clearable>
            <el-option v-for="dict in dict.type.order_return_status" :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <template v-if="queryParams.tabType>4">
        <el-col :span="6">
          <el-form-item label="还车类别:" prop="returnCategory">
            <el-select v-model="queryParams.returnCategory" clearable>
              <el-option v-for="dict in dict.type.return_car_type" :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="还车时间:">
            <el-date-picker v-model="retutnCarTimes" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            @change="changeReturnCarTimes"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否违章:">
            <el-select v-model="queryParams.violation" clearable>
              <el-option v-for="dict in dict.type.business_yes_no" :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </template>


    </SearchContent>

    <div class="card-wrap paddingAll20" :model="queryParams" ref="queryForm" label-width="86px">
      <div class="table-title-wrap justify-end">
        <el-button type="primary" size="mini" @click="handleWarnConfig"
                   v-hasPermi="['order:returnCar:warnConfig']">预警配置
        </el-button>
        <el-button type="primary" size="mini" @click="handleExport"
                   v-hasPermi="['order:returnCar:export']">导出
        </el-button>
      </div>

      <el-table
          v-loading="loading"
          :data="dataList"
          :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="120px" fixed="left">
          <template v-slot="{row}">
            <e-button v-hasPermi="['order:returnCar:commit']" v-if="row.returnStatus==1" size="mini" type="text" @click="handleOperate(1,row)"
            >还车
            </e-button>
            <e-button v-hasPermi="['order:returnCar:detail']" size="mini" type="text" @click="handleOperate(2,row)"
            >查看
            </e-button>
          </template>
        </el-table-column>

        <el-table-column label="还车状态" align="center" prop="returnStatus" min-width="120px" show-overflow-tooltip key="returnStatus">
          <template v-slot="{row}">
            <dict-tag :options="dict.type.order_return_status" :value="row.returnStatus"/>
          </template>
        </el-table-column>
        <el-table-column label="还车类别" align="center" prop="returnCategory" min-width="120px" show-overflow-tooltip key="returnCategory">
          <template v-slot="{row}">
            <dict-tag v-if="row.returnCategory" :options="dict.type.return_car_type" :value="row.returnCategory"/>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="订单号" align="center" prop="orderNumber" min-width="220px" show-overflow-tooltip key="orderNumber">
          <template v-slot="{row}">
            <span @click="goOrderDetail(row)" style="color: #1890ff; cursor: pointer"> {{ row.orderNumber|filterNull }}</span>

          </template>
        </el-table-column>
        <el-table-column label="车牌号" align="center" prop="carNo" min-width="120px" show-overflow-tooltip key="carNo">
          <template v-slot="{row}">
            {{ row.carNo|filterNull }}
          </template>
        </el-table-column>
        <el-table-column label="所属公司" align="center" prop="companyName" min-width="120px" show-overflow-tooltip key="companyName">
          <template v-slot="{row}">
            {{ row.companyName|filterNull }}
          </template>
        </el-table-column>
        <el-table-column label="客户名称" align="center" prop="customerName" min-width="120px" show-overflow-tooltip key="customerName">
          <template v-slot="{row}">
            {{ row.customerName|filterNull }}
          </template>
        </el-table-column>
        <el-table-column label="出库里程(km)" align="center" prop="outboundMileage" min-width="120px" show-overflow-tooltip key="outboundMileage">
          <template v-slot="{row}">
            {{ row.outboundMileage|filterNull }}
          </template>
        </el-table-column>
        <el-table-column label="出库油量(%)" align="center" prop="outboundFuel" min-width="120px" show-overflow-tooltip key="outboundFuel">
          <template v-slot="{row}">
            {{ row.outboundFuel|filterNull }}
          </template>
        </el-table-column>
        <el-table-column label="还车时间" align="center" prop="returnTime" min-width="120px" show-overflow-tooltip key="returnTime">
          <template v-slot="{row}">
            {{ row.returnTime|filterNull }}
          </template>
        </el-table-column>
        <el-table-column label="还车里程(km)" align="center" prop="returnMileage" min-width="120px" show-overflow-tooltip key="returnMileage">
          <template v-slot="{row}">
            {{ row.returnMileage|filterNull }}
          </template>
        </el-table-column>
        <el-table-column label="行驶里程(km)" align="center" prop="drivingMileage" min-width="120px" show-overflow-tooltip key="drivingMileage">
          <template v-slot="{row}">
            {{ row.drivingMileage|filterNull }}
          </template>
        </el-table-column>
        <el-table-column label="还车油量(%)" align="center" prop="returnFuel" min-width="120px" show-overflow-tooltip key="returnFuel">
          <template v-slot="{row}">
            {{ row.returnFuel|filterNull }}
          </template>
        </el-table-column>
        <el-table-column label="是否违章" align="center" prop="violation" min-width="120px" show-overflow-tooltip key="createTime">
          <template v-slot="{row}">
            <dict-tag v-if="row.violation" :options="dict.type.business_yes_no" :value="row.violation"/>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="违约金" align="center" prop="penalty" min-width="120px" show-overflow-tooltip key="penalty">
          <template v-slot="{row}">
            {{ row.penalty|filterNull }}
          </template>
        </el-table-column>
        <el-table-column label="减免金额" align="center" prop="exemptionAmount" min-width="120px" show-overflow-tooltip key="exemptionAmount">
          <template v-slot="{row}">
            {{ row.exemptionAmount|filterNull }}
          </template>
        </el-table-column>
        <el-table-column label="待扣金额" align="center" prop="pendingDeduction" min-width="120px" show-overflow-tooltip key="pendingDeduction">
          <template v-slot="{row}">
            {{ row.pendingDeduction|filterNull }}
          </template>
        </el-table-column>
        <el-table-column label="待还车时间" align="center" prop="waitingTimeForCarReturn" min-width="120px" show-overflow-tooltip key="waitingTimeForCarReturn">
          <template v-slot="{row}">
            <span v-if="row.waitingTimeForCarReturn||row.waitingTimeForCarReturn==0">{{ row.waitingTimeForCarReturn }}天</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="申请人" align="center" prop="createBy" min-width="120px" show-overflow-tooltip key="createBy">
          <template v-slot="{row}">
            {{ row.createBy|filterNull }}
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                  @pagination="getList"/>

    </div>

    <!--预警配置-->
    <el-dialog title="还车预警配置" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="form" :rules="rules" label-position="right" label-width="100px">
        <el-form-item label="预警规则:" prop="days">
          <div class="flex-row-center">
            合同预约还车时间小于
            <el-input style="width: 100px;margin:0 10px" v-model="form.days" type="number" @blur="handleBlur" onkeyup="value=value.replace(/\D/g, '')"></el-input>
            天
          </div>
        </el-form-item>
        <el-form-item label="状态:" prop="status">
          <e-switch v-model="form.status"></e-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveWarnConfig">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import Tabs from "@/components/Tabs/index.vue"
import * as orderReturnApi from "@/api/returnCar/returnCar";
import {calculateDeductionFeesSave, orderReturnWarningDetail} from "@/api/returnCar/returnCar";
import {orderCarParam} from "@/api/gps/gpsList";
export default {
  name: "ReturnCarList",
  components: {
    SearchContent,
    Tabs
  },
  dicts: ['return_car_type', 'business_yes_no', 'order_return_status'],
  data() {
    return {
      form: {
        id: null,
        days: null,
        status: null,

      },
      dialogFormVisible: false,
      // 遮罩层
      loading: false,
      retutnCarTimes: [],
      tabs: [
        {
          label: '全部',
          value: 1,
          count: 0
        },
        {
          label: '30天内待还车',
          value: 2,
          count: 0
        },
        {
          label: '15天内待还车',
          value: 3,
          count: 0
        },
        {
          label: '7天内待还车',
          value: 4,
          count: 0
        },
        {
          label: '还车中',
          value: 5,
          count: 0
        },
        {
          label: '本月已还车',
          value: 6,
          count: 0
        }
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        tabType: 1,
        orderNo: null,
        carNo: null,
        returnCategory: null,
        createBy: null,
        returnTimeStart: null,
        returnTimeEnd: null,
        companyId: null,
        returnStatus: null,
        customerName: null,
        violation: null,
      },
      total: 0,
      dataList: [],
      deptList: [],
      rules: {
        days: [
          {required: true, message: '请输入预警天数', trigger: 'change'},
        ],
        status: [
          {required: true, message: '请选择状态', trigger: 'change'},
        ]

      },

    };
  },
  mounted() {
    this.getWarnConfigInfo()
    this.getDeptList()
    this.getList()
  },
  activated() {
    this.getList()
  },
  methods: {
    handleBlur() {
      // 当输入框失焦时校验值的有效性，将其限定在指定的范围内
      let num = Number(this.form.days);
      if (num < 16) {
        this.form.days = '16';
      } else if (num > 1825) {
        this.form.days = '1825';
      }
    },
    changeReturnCarTimes(val) {
      this.queryParams.returnTimeStart = val[0]
      this.queryParams.returnTimeEnd = val[1]
      this.handleQuery()
    },
    changeTab(value) {
      this.queryParams.tabType = value;
      this.handleQuery();
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      orderReturnApi.orderReturnList(this.queryParams).then(res => {
        this.dataList = res.rows;
        this.total = res.total;
      }).finally(() => {
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      // this.$refs?.queryForm?.resetFields();
      this.retutnCarTimes = null;
      // this.queryParams.startTime = null
      // this.queryParams.endTime = null
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        tabType: this.queryParams.tabType,
        orderNo: null,
        carNo: null,
        returnCategory: null,
        createBy: null,
        returnTimeStart: null,
        returnTimeEnd: null,
        companyId: null,
        returnStatus: null,
        customerName: null,
        violation: null
      }
      this.handleQuery();
    },


    handleOperate(type, row) {
      switch (type) {
        case 1://还车
          this._toPage({
            name: 'CommitReturnCar',
            query: {
              orderNo: row.orderNumber
            }

          })
          break
        case 2://查看
          this._toPage({
            name: 'ReturnCarDetail',
            query: {
              orderNo: row.orderNumber,
              carId: row.carId
            }
          })
          break
      }
    },
    goOrderDetail(row){
      orderCarParam(row.orderNumber)
          .then(res => {
            if (res.code == 200) {
              this._toPage({
                name: "SuborderDetail",
                query: {
                  id: res.data.orderCarId,
                  orderId: res.data.orderCarCode
                },
              });
            } else {
              throw new Error(res);
            }
          })
    },
    // 获取所属公司
    getDeptList() {
      orderReturnApi.deptList({
        deptType: 2
      }).then(res => {
        this.deptList = res.data;
      })
    },
    // 获取预警配置信息
    getWarnConfigInfo() {
      orderReturnApi.orderReturnWarningDetail().then(res => {
        this.form = res.data;
        const days = this.form?.days || 30
        this.tabs[1].label = `${days}天内待还车`
      })
    },
    //保存预警信息
    saveWarnConfig() {
      orderReturnApi.calculateDeductionFeesSave(this.form).then(res => {
        this.dialogFormVisible = false
        this.getWarnConfigInfo()
      })
    },
    //预警配置
    handleWarnConfig() {
      this.dialogFormVisible = true
    },
    // 导出
    handleExport() {
      this.download('/returnCar/orderReturn/export', this.queryParams, `还车_${new Date().getTime()}.xlsx`)
    }

  }
};
</script>
